<template>
	<div class="pe_container">
		<div class="pe_infomation">
			<div class="pe_infomation_items">
				<template>
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column fixed label="序号" type="index" width="50">
						</el-table-column>
						<el-table-column prop="ueId" label="用户设备ID" width="120">
						</el-table-column>
						<el-table-column prop="equipmentId" label="设备id" width="120">
						</el-table-column>
						<el-table-column prop="peStatus" :formatter="stateFormat" label="用户设备运行状态">
						</el-table-column>
						<el-table-column prop="peWorktime" label="设备工作时长(小时)">
							<template slot-scope="scope">
								<div>
									<div>{{(scope.row.peWorktime/60).toFixed(1)}}</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="pePowerGeneration" label="用户设备累计发电量(度)">
							<template slot-scope="scope" v-if="scope.row.pePowerGeneration">
								<div>
									<div>{{scope.row.pePowerGeneration}}</div>
								</div>
							</template>
						</el-table-column>

					</el-table>
				</template>
			</div>
			<div class="echart2" id="mychart2" :style="{ float: 'left', width: '40%', height: '400px' }"></div>
		</div>
		<div class="echart" id="mychart" :style="{ float: 'left', width: '100%', height: '400px' }"></div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	import request from '../../utils/axios/request'
	export default {
		data() {
			return {
				pieData: [],
				tableData: [{
					ueId: '',
					equipmentId: '',
					peStatus: '',
					peWorktime: '',
					peCreatetime: '',
					pePowerGeneration: ''
				}],
				circularDiagramData: [{
					name: '',
					value: ''
				}]
			};
		},
		mounted() {
			request({
					method: 'get',
					url: '/usersEquipments/allUsersEquipments',
					// headers: {
					// 	token: this.t
					// }
				})
				.then((res) => {
					console.log(res)
					var jsonObj = JSON.parse(JSON.stringify(res.data.data));
					this.tableData = jsonObj;
					console.log(this.tableData)
				})  
			this.initEcharts()
		},
		updated() {
			// this.initEcharts()
		},
		methods: {
			stateFormat(row, column) {
				if (row.peStatus === true) {
					return '正常运行'
				} else {
					return '未运行'
				}
			},
			initEcharts() {
				var myChart = echarts.init(document.getElementById("mychart")); // 图标初始化
				var myChart2 = echarts.init(document.getElementById("mychart2")); // 图标初始化
				request({
					method: 'get',
					url: '/usersEquipments//UserId/' + 123
				}).then((res) => {
					console.log(res)
					var jsonObj = JSON.parse(JSON.stringify(res.data.data));
					// console.log(jsonObj)
					// console.log('阿八八八')
					for (var i = 0; i < jsonObj.length; i++) {
						// jsonObj[i].goodsName = jsonObj[i].eName;
						this.circularDiagramData.push({
							name: jsonObj[i].ename,
							value: jsonObj[i].pePowerGeneration
						})
					}
					console.log(this.circularDiagramData)
					myChart2.setOption({
						series: [{
							name: '设备信息',
							data: this.circularDiagramData
						}]
					})
				})

				var option = {
					title: {
						text: '设备发电功率折线图',

					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					toolbox: {
						show: true,
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						// prettier-ignore
						data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00',
							'11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15',
							'22:30', '23:45'
						]
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}kW'
						},
						axisPointer: {
							snap: true
						}
					},
					visualMap: {
						show: false,
						dimension: 0,
						pieces: [{
								lte: 6,
								color: 'blue'
							},
							{
								gt: 6,
								lte: 8,
								color: 'blue'
							},
							{
								gt: 8,
								lte: 14,
								color: 'blue'
							},
							{
								gt: 14,
								lte: 17,
								color: 'blue'
							},
							{
								gt: 17,
								color: 'blue'
							}
						]
					},
					series: [{
						name: 'Electricity',
						type: 'line',
						smooth: true,
						// prettier-ignore
						data: [0, 0, 0, 0, 0, 1.5, 2.2, 2.8, 4.4, 4.5, 4.7, 5.2, 5.1, 4.9, 3.2, 1.2,
							0, 0, 0, 0
						],
						markArea: {
							itemStyle: {
								color: 'rgba(255, 173, 177, 0.4)'
							},
							data: [

							]
						}
					}]


				};

				var option2 = {
					title: {
						text: '设备累计发电量环形图',

					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: '设备信息',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						// data: [

						// ]
						// data:[{
						// 	value:this.circularDiagramData.value,
						// 	name:this.circularDiagramData.name
						// }]
						data: [
							// {
							// 		value: 1048,
							// 		name: '设备1'
							// 	},
							// 	{
							// 		value: 735,
							// 		name: '设备2'
							// 	},
							// 	{
							// 		value: 580,
							// 		name: '设备3'
							// 	},
							// 	{
							// 		value: 484,
							// 		name: '设备4'
							// 	},
							// 	{
							// 		value: 300,
							// 		name: '设备5'
							// 	}
						]
					}]
				};

				myChart.setOption(option); // 渲染页面
				myChart2.setOption(option2); // 渲染页面
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			}
		}
	};
</script>
<style scoped>
	.pe_container {
		width: 100%;
		height: 800px;
		display: flex;
		flex-direction: column;
		/* background-color: #ff557f; */
	}

	.pe_infomation {
		height: 400px;
		display: flex;
		flex-direction: row;
	}

	.pe_infomation_items {
		width: 60%;
		background-color: #ffffff;
	}

	.echart {
		margin-top: 10px;
	}
</style>